<template>
  <div class="home-page">
    <div class="swiper-container" :style="{'height':swiperHeight+'px'}">
      <div class="sanjiao">
        <img src="../../assets/sanjiao.png" alt="">
        <img src="../../assets/down.png" alt="" class="down-jiantou">
      </div>
      <div class="swiper-wrapper">
        <div class="swiper-slide box1">
          <div>
            <span>D’OVERBROECK'S SCHOOL</span>
            <span>德欧中学</span>
<!--            <div class="line1"></div>-->

          </div>
          <div>
            <span> A leading co-educational day and boarding school in Oxford</span>
            <span>牛津顶尖走读寄宿混合制学校（男女同校）</span>
          </div>
        </div>

      </div>
      <!-- Add Pagination -->
      <!--      <div class="swiper-pagination"></div>-->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <div class="mid" style="padding-left: 60px;">
      <img src="../../assets/dvb/DVB-NEW-LOGO-2014-clear.jpg" alt="" style="width: 30%;display: block;">
    </div>
    <div class="mid">

      <div>
        <p><span>德欧中学</span>是位于牛津北部的一所顶尖的私立走读寄宿混合制学校, 男女同校。学校由三个学部组成：</p>
        <ul>
          <li>-7年级至11年级：接收11至16岁学生。仅接收走读生。</li>
          <li>-Six Form学院：为16岁以上学生提供A-Level课程。全寄宿和周寄宿均可。Six Form学院50%学生为国际学生。</li>
          <li>-国际部：为11至16岁国际学生提供国际中学教育普通证书（IGCSE）课程及其预科课程。提供出国留学选项</li>
        </ul>
      </div>
      <div>
        <p>我们凭借独具特色且卓有成效的办学宗旨和卓越的教学质量赢得了极高的声誉。2020年，我们的学生取得了优异的成绩，65%的A-Level课程学生获得了A*或A的好成绩；68%的GCSE 课程学生成绩在7-9分之间（优秀）；62%的IGCSE课程学生成绩在7-9分之间（优秀）。</p>
        <p>2019年，德欧中学连续第三年在A-Level考试中取得进步，被评为牛津郡顶尖学校，在英格兰排名前1%，帮助我们Six Form学院的学生取得了显著的学业进步。</p>
      </div>
    </div>
    <div class="fangwen">
      <a href="https://www.doverbroecks.com/" target="_blank">访问我们的网站</a>
    </div>
  </div>
</template>

<script>
  import swiper from '../../assets/swiper/swiper-bundle.min'
  export default {
    name: "index",
    created() {
      let H = window.innerHeight

      this.swiperHeight = H
    },
    mounted() {
      var swiper = new Swiper('.swiper-container', {
        // spaceBetween: 30,
        centeredSlides: true,
        /*autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },*/
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    }
  }
</script>

<style scoped lang="scss">
  .swiper-container {
    width: 100%;
    height: 1000px;
    position: relative;
  }
  .sanjiao{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
    z-index: 222;
  img{
    width: 120px;
    display: block;
  }
  span{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    display: block;
    text-align: center;
    color: #303030;
    z-index: 999;
  }
    .down-jiantou {
      position: absolute;
      left: 50%;
      margin-left: -19px;
      bottom: 9px;
      width: 38px;
      animation: shangxia 0.7s linear infinite;
    }
    @keyframes shangxia {
      0% {bottom: 9px}
      50%{bottom: 3px}
      100%{bottom: 9px}
    }
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  /*.swiper-slide>div:nth-of-type(1) span{
    background: rgba(255,255,255,.8);
    padding: 15px 20px;
    font-size: 32px;
    color: #303030;
    font-weight: 300;
  }*/
  .swiper-slide>div:nth-of-type(1){
    margin: 60px 0;
    margin-bottom: 35px;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,.65);
    padding: 20px 35px;
  }
  .swiper-slide>div:nth-of-type(1) span:nth-of-type(1){
    font-size: 17px;
    color: #303030;
    margin-bottom: 20px;
  }
  .swiper-slide>div:nth-of-type(1) span:nth-of-type(2){
    font-size: 25px;
    font-weight: bold;
    color: #303030;
  }
  .swiper-slide>div:nth-of-type(2){
    display: flex;
    flex-direction: column;
    padding: 10px 40px;
    background: rgba(255,255,255,.65);transition: all .4s ease;cursor: pointer;
  }
  .swiper-slide>div:nth-of-type(2) span{



    line-height: 32px;
    font-size: 18px;
    color: #303030;
  }
  .swiper-slide>div:nth-of-type(2):hover{
    background: #3281c4;
  }
  .box{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 100px;*/
  }
  .box1{
    background: url("../../assets/dvb/Students0310a-002.jpg") no-repeat center center;
  }
  .box2{
    background: url("../../assets/UP-2.jpg") no-repeat center center;
  }
  .box3{
    background: url("../../assets/UP-3.jpg") no-repeat center center;
  }
  .box4{
    background: url("../../assets/UP-4.jpg") no-repeat center center;
  }
  /*.home-page{
    height: 1200px;
    background: url("../../assets/UP-1.jpg") no-repeat center fixed ;
  }*/


  .jieshao{
  .jieshao-box{
    width: 730px;
    margin: 0 auto;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  .cibiao{
    font-size: 25px;
    font-weight: 300;
    line-height: 35px;
    color: #303030;
    margin-bottom: 20px;
  }
  .zhubiao{
    font-size: 35px;
    font-weight: bold;
    line-height: 55px;
    color: #303030;
    margin-bottom: 30px;
  }
  .zhengwen{
    font-size: 20px;
    line-height: 45px;
    font-weight: 300;
    color: #303030;
    margin-bottom: 35px;
  }
  }
  }

  .news-box{
    background: url("../../assets/news_background.jpg") no-repeat center center;
  }
  .news-box-rongqi{
    width: 900px;

    margin: 0 auto;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
  .news-biaoti{
    font-size: 30px;
    line-height: 45px;
    font-weight: 700;
    text-align: center;
    display: block;
    padding-bottom: 20px;
    position: relative;
    color: #fff;
  }
  .news-biaoti:before{
    content: '';
    position: absolute;
    width: 5%;
    height: 4px;
    /*background: #303030;*/
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
  }
  .news-main{
    margin-top: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

  }
  }

  .news-pic{
  /*width: 384px;*/
  /*height: 150px;*/
  img{
    width: 100%;
    /*margin-bottom: 20px;*/
  }
  }
  .news-dec{
    padding: 10px 30px 20px 30px;
    position: relative;
  }
  .news-dec:before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 50%;
    margin-left: -10px;
    background: #fff;
    top: -10px;
    transform: rotate(45deg);
    z-index: 999;
  }
  .news-details{
    background: #fff;
    transition: all 0.3s linear;

    /*padding: 15px;*/
    display: flex;
    cursor: pointer;
    transition: all .5s ease;
    flex-direction: column;
    width: 45%;
    font-size: 16px;
    margin-bottom: 80px;
    color: #303030;
  .news-title{
    display: flex;
    position: relative;
    font-weight: bold;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    text-align: center;
    margin-top: 20px;
    /*margin-bottom: 30px;*/
  }
  .line{
    width: 10%;
    height: 3px;
    background: #303030;
    margin: 15px auto 15px auto;
  }

  .news-dec1{
    word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
    font-size: 13px;
    line-height: 35px;
    /*margin-bottom: 20px;*/
  }
  .news-more{
    text-align: right;
    font-size: 14px;
  }
  }
  .news-details:hover{
    /*background: rgba(255,255,255,.4);*/
    box-shadow: 0 0 20px rgba(0,0,0,.4);
  }


  .line1{
    width: 40px;
    height: 3px;
    background: #303030;
    margin: 15px auto;
  }

  .mid{
    margin: 40px auto 40px auto;
    max-width: 1200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 17px;
    line-height: 36px;
    div{
      flex: 1;
      width: 50%;
      margin: 0 30px;
      display: flex;
      flex-direction: column;
      p{
        span{
          font-weight: bold;
        }
      }
      ul{
        display: flex;
        flex-direction: column;
        li{
          margin-bottom: 15px;
        }
      }
    }
  }
  .fangwen{
    text-align: center;
    margin: 50px auto 150px auto;
    a{
      padding: 18px 26px;
      background: #303030;
      color: #fff;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    a:hover{
      background: #3281c4;
    }
  }
</style>
